<template>
  <a-table
    class="sort_table"
    ref="refTable"
    :row-key="rowKey"
    :row-class-name="rowClassName"
    :scroll="{y: scrollY}"
    :columns="columns"
    :data-source="data"
    :custom-row="customRowFun"
    :pagination="false">
  </a-table>
</template>
<script setup>
import { defineProps, ref, onMounted, defineEmits, watch, getCurrentInstance } from 'vue';
const scrollY = ref(0);
const refTable = ref(null);
const checkedRowIndex = ref(-1);
const emit = defineEmits(['rowClick']);
const that = getCurrentInstance();
const props = defineProps({
  columns: {
    type: Array,
    default: () => []
  },
  data: {
    type: Array,
    default: () => []
  },
  rowClick: {
    type: Boolean,
    default: true
  },
  rowKey:{
    type: String,
    default: 'id'
  }
});
watch(checkedRowIndex, (v) => {
  if (props.rowClick && v > -1 && props.data[v]) {
    emit('rowClick', props.data[v]);
  }
});

watch(() => props.data, v => {
  checkedRowIndex.value = 0;
}, { deep: true, immediate: true });

onMounted(() => {
  scrollY.value = refTable.value.$el.offsetHeight - 50;
  window.addEventListener('resize', ()=>{
    that.ctx.$forceUpdate();
  })
});

const customRowFun = (record, index) => {
  return {
    onClick: () => {
      checkedRowIndex.value = index;
    }
  };
};
const rowClassName = (recorde, index) => {
  return props.rowClick && index === checkedRowIndex.value ? 'checked' : '';
};

</script>
<style lang="less" scoped>
.sort_table {
  width: 100%;
  height: 100%;
}
/deep/ .ant-table-thead > tr > th {
  // background: rgba(11, 60, 100, 0.5);
  background: rgba(22, 73, 143, 0.5);
  color: rgba(255, 255, 255, 0.85);
  border: none;
  font-size: 1.125rem;
}
/deep/ .ant-table-header {
  background: transparent;
  overflow: hidden !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/deep/ .ant-table {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
}
/deep/ .ant-table-body {
  // background: rgba(9, 28, 46, 0.8) !important;
  background: transparent !important;
}

/deep/ .ant-table-tbody > tr > td {
  background: transparent !important;
  border: none;
}
/deep/
  .ant-table-thead
  > tr
  > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover {
  background: rgba(22, 73, 143, 0.25);
}
/deep/ .ant-table-placeholder {
  background: transparent !important;
  border: none;
}
/deep/ .ant-empty-description {
  color: rgba(255, 255, 255, 0.85);
}
/deep/ .ant-table-row {
  cursor: pointer;
}

/deep/ .ant-table-row:hover {
  background: rgba(22, 73, 143, 0.25);
}
/deep/ .ant-table-row.checked {
  background: rgba(22, 73, 143, 0.25);
}
</style>
